<template>
	<u-upload 
		ref="uUpload" 
		:action="action" 
		:header="header" 
		:form-data="formData" 
		:accept="accept" 
		:limitType="limitType" 
		:extension="extension" 
		:before-remove="beforeRemove" 
		:custom-btn="customBtn" 
		:show-upload-list="showUploadList"
		:auto-upload="autoUpload" 
		:upload-text="uploadText" 
		:file-list="fileList"
		:show-progress="showProgress" 
		:is-show-loading="isShowLoading" 
		:show-loading-title="showLoadingTitle" 
		:show-loading-mask="showLoadingMask" 
		:deletable="deletable" 
		:disabled="disabled" 
		:select-file-able="selectFileAble" 
		:max-count="maxCount"
		:max-size="maxSize" 
		@on-choose-fail="onChooseFail" 
		@on-list-change="onListChange" 
		@on-success="onSuccess" 
		@on-remove="onRemove"
		@on-error="handleError"
	>
	</u-upload>
</template>

<script>
	import {Base64} from '@/common/base64.js'
	export default {
		name: 'WechatUpload',
		props: {
			action: {
				type: String,
				default: '/api/blade-wechat/upload/uploadFile'
			},
			formData: {
				type: Object,
				default() {
					return {};
				}
			},
			maxCount: {
				type: [String, Number],
				default: 1
			},
			// 是否启用
			disabled: {
				type: Boolean,
				default: false
			},
			customBtn: {
				type: Boolean,
				default: false
			},
			showUploadList: {
				type: Boolean,
				default: true
			},
			autoUpload: {
				type: Boolean,
				default: true
			},
			uploadText: {
				type: String,
				default: "选择文件"
			},
			fileList: {
				type: Array,
				default() {
					return [];
				}
			},
			showProgress: {
				type: Boolean,
				default: true
			},
			deletable: {
				type: Boolean,
				default: true
			},
			// 文件大小限制，单位为byte
			maxSize: {
				type: [String, Number],
				default: Number.MAX_VALUE
			},
			// 接受的文件类型, 可选值为image、file
			accept: {
				type: String,
				default: 'image'
			},
			// 允许上传的图片后缀，当accept为image时使用
			limitType:{
				type: Array,
				default() {
					// 支付宝小程序真机选择图片的后缀为"image"
					// https://opendocs.alipay.com/mini/api/media-image
					return ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'];
				}
			},
			// 根据文件拓展名过滤
			extension: {
				type: Array,
				default() {
					return [];
				}
			},
			// 是否显示 上传 loading 提示框
			isShowLoading: {
				type: Boolean,
				default: true
			},
			// loading提示内容
			showLoadingTitle: {
				type: String,
				default: '上传中...'
			},
			// 是否显示透明蒙层
			showLoadingMask: {
				type: Boolean,
				default: true
			},
			// 是否可以进行选择操作
			selectFileAble: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				header: {}
			}
		},
		created() {
			this.createUploadHeader();
		},
		methods: {
			createUploadHeader() {
				this.header['Blade-Auth'] = 'bearer ' + `${this.vuex_accessToken}`
				this.header['Authorization'] =
					`Basic ${Base64.encode(`${this.vuex_config.clientId}:${this.vuex_config.clientSecret}`)}`
			},
			getFileList(){
				// 筛选出上传进度为100的文件
				let files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				return files;
			},
			clearFileList(){
				this.$refs.uUpload.clear();
			},
			beforeRemove(index, lists) {
				return true;
			},
			onChooseFail(e) {
				// console.log(e);
			},
			onListChange(lists) {
				// console.log('onListChange:', lists);
				this.$emit('on-list-change', lists);
			},
			onSuccess(data, index, lists, name) {
				let { code, msg, success} = data;
				if(success){
					this.$u.toast('上传成功');
					this.$emit('on-success', data, index, lists);
				}else{
					this.$u.toast('上传失败');
					this.$refs.uUpload.uploadError(index,'上传失败');
					this.$emit('on-error', '上传失败', index, lists);
				}
			},
			onRemove(index, lists) {
				// console.log("index:%s,lists:%s", index, lists);
				this.$emit('on-remove', index, lists);
			},
			handleError(res, index, lists, name) {
				// console.log('handleError:', res, index, lists, name);
			}
		}
	}
</script>

<style>
</style>